<template>
	<div class="container">
		<el-card>
			<div slot="header">
				<!-- 面包屑 -->
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>评论管理</el-breadcrumb-item>
				</el-breadcrumb>
			</div>

			<!-- 表格 -->
			<el-table :data="commentList" stripe border>
				<el-table-column prop="title" label="标题">
				</el-table-column>
				<el-table-column prop="total_comment_count" label="总评论数">
				</el-table-column>
				<el-table-column prop="fans_comment_count" label="粉丝评论数">
				</el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">
						<i :class="[scope.row.comment_status ? 'el-icon-circle-check green' : 'el-icon-circle-close red']"></i>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-switch
						  v-model="scope.row.comment_status"
						  active-color="#13ce66"
						  inactive-color="#ff4949"
							@change="updateCommentStatus(scope.row)"
							:disabled="scope.row.disabled">
						</el-switch>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页器 -->
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page"
			 :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.per_page" layout="total, sizes, prev, pager, next, jumper"
			 :total="total">
			</el-pagination>
		</el-card>
	</div>
</template>

<script>
	import {
		// getArticles,
		getCommentLocal,
		updateCommentStatus
	} from '@/api/article.js'
	export default {
		data () {
			return {
				// 查询信息对象
				queryInfo: {
					page: 1,
					per_page: 10,
					response_type: 'comment'
				},
				// 评论列表数据数组
				commentList: [],
				// 总页数
				total: 0
			}
		},
		created () {
			this._loadComment()
		},
		methods: {
			// 加载评论状态
			_loadComment () {
				/*
				 *	// 接口已失效
				 * 	getArticles(this.queryInfo).then(({data:res}) => {
				 *  	res.data.results.forEach(item => {
				 *			this.$set(item, 'disabled', false)
				 *		})
				 *		this.commentList = res.data.results
				 *		this.total = res.data.total_count
				 *	}).catch(err => {
				 *		this.$message.error('获取评论信息失败：' + err)
				 *	})
				 *
				 */

				getCommentLocal(this.queryInfo).then(({ data: res }) => {
					res[0].results.forEach(item => {
						this.$set(item, 'disabled', false)
					})
					this.commentList = res[0].results
					this.total = res[0].total
				}).catch(err => {
					this.$message.error('获取评论信息失败：' + err)
				})
			},
			// 每页条数
			handleSizeChange (newSize) {
				this.queryInfo.per_page = newSize
				this._loadComment()
			},
			// 第几页
			handleCurrentChange (newPage) {
				this.queryInfo.page = newPage
				this._loadComment()
			},
			// 修改评论状态
			updateCommentStatus (comment) {
				const articleId = comment.id
							const status = comment.comment_status

				// 禁用开关
				comment.disabled = true

				updateCommentStatus(articleId, status).then(res => {
					this.$message.success('更新状态成功！')
					// 启用开关
					comment.disabled = false
					this._loadComment()
				}).catch(err => {
					this.$message.error('更新状态失败：' + err)
					setTimeout(() => {
						// 启用开关
						comment.disabled = false
						// 更新失败时恢复原来的状态
						comment.comment_status = !comment.comment_status
					}, 1000)
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.green{
		color: #13ce66;
		font-size: 16px;
	}
	.red{
		color: #ff4949;
		font-size: 16px;
	}
</style>
